<template>
	<div id="home">
		<div id="container">
			<el-row>
				<!-- 一级菜单 -->
				<el-col :span="4" :offset="1" class="cateList">
					<div class="cate_img">
						<i class="el-icon-office-building"></i>
						商品分类
					</div>
					<el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff">
						<el-menu-item index="cate.cate_id" v-for="(cate) in categoryList" :key="cate.cate_id"
							@click="getRList(cate.cate_id)">
							<i :class="cate.cate_icon"></i>
							<span slot="title">{{ cate.cate_name }}</span>
						</el-menu-item>
					</el-menu>
				</el-col>
				<!--轮播图-->
				<el-col :span="14">
					<el-carousel v-if="homecasual.length > 0">
						<el-carousel-item v-for="(casual) in homecasual" :key="casual.id">
							<img :src="casual.imgurl" alt="">
						</el-carousel-item>
					</el-carousel>
				</el-col>
				<!-- 登录信息板块 -->
				<el-col :span="4" class="con_log">
					<div>
						<img :src="userInfo.user_avatar" v-if="userInfo.user_avatar" />
						<img src="./img/no_login.jpg" v-else />
					</div>
					<p>Hi~ 欢迎来到叮当书城</p>
					<p v-if="!userInfo.id"><router-link to="/login">登录</router-link><router-link to="/login">注册</router-link></p>
					<p v-else class="userIn">
						<a v-if="userInfo.user_nickname">您好,{{ userInfo.user_nickname }}</a>
						<a v-else>您好,{{ userInfo.user_name | nameFormat }}</a>
						<router-link to="/me">个人中心</router-link>
					</p>
					<button class="welfare">新人福利</button>
					<button class="vip">加入会员</button>
				</el-col>
			</el-row>

			<!-- 分类产品展示区域 -->
			<div class="product" v-for="(cate) in categoryList" :key="cate.cate_id">
				<div class="pro_line">
					<h3>{{ cate.cate_name }}</h3>
					<div><a @click.prevent="getRList(cate.cate_id)">MORE</a></div>
				</div>
				<div class="pro_show">
					<ProductItem v-for="(pro) in homeshoplist[cate.cate_id - 1]" :key="pro.goods_id" :pro="pro" />
				</div>
			</div>
		</div>
		<div class="end_show"></div>

		<!-- 尾部 -->
		<!-- <div id="footer">
			<img src="./img/footer.png" />
			<div class="footer_text"></div>
		</div> -->

		<!--左侧微型购物车区域-->
		<!-- <DrawerSection v-if="this.$route.path.indexOf('/home') != -1" @goShopCar="goShopCar" /> -->
	</div>
</template>

<script>
import { mapState } from 'vuex'
import DrawerSection from './children/DrawerSection/DrawerSection'
import ProductItem from '../../components/ProductItem/ProductItem'
import { MessageBox } from 'element-ui'

export default {
	computed: {
		...mapState(['homecasual', 'categoryList', 'homeshoplist', 'userInfo'])
	},
	components: {
		DrawerSection,
		ProductItem
	},
	methods: {
		getRList(cate_id) {
			this.$router.replace('/search/' + cate_id + '/1');
		},
		goShopCar() {
			if (this.userInfo.id) {
				this.$router.replace('/shopcar');
			} else {
				MessageBox({
					type: 'info',
					message: "请先登录!",
					showClose: true,
				});
			}
		},
	},
	mounted() {
		// 请求轮播图数据
		this.$store.dispatch('reqHomeCasual');
		// 请求分类数据
		this.$store.dispatch('reqCategory');
		// 请求商品数据
		if (this.userInfo && this.userInfo.id) {
			let user_id = this.userInfo.id;
			this.$store.dispatch('reqCartsGoods', { user_id });
		}
	},
	watch: {
		categoryList() {
			this.$nextTick(() => {
				// 请求首页商品数据
				this.$store.dispatch('reqHomeShopList');
			});
		},
	}
}
</script>

<style scoped>
#home {
	font-family: "Microsoft YaHei";
}

/*产品展示、购买、分类简介区*/
#container {
	position: relative;
	margin: 60px auto;
	width: 100%;
	background: rgba(245, 245, 245, 0.5);
}

#container .el-row .el-col {
	height: 100%;
}

.el-row .cateList .cate_img {
	width: 100%;
	text-indent: 14px;
	height: 40px;
	color: white;
	line-height: 40px;
	font-size: 16px;
	background: #F10215;
}

/*自动播放图片区域*/
.el-col .el-carousel {
	height: 100%;
	border-top: 2px solid #FF0036;
}

.el-carousel .el-carousel__item img {
	height: 100%;
	width: 100%;
}

/*一级菜单*/

/*展示登录信息区域*/
#container .el-row .con_log.el-col {
	background: white;
	text-align: center;
	font-size: 15px;
	color: #989898;
	border: 1px solid #ccc;
	height: 320px;
}

.con_log>div {
	margin-top: -30px;
	margin-left: 75px;
	margin-bottom: 60px;
	width: 70px;
	height: 70px;
}

.con_log>div>img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: 3px 3px 5px 5px #E3E3E3;
}

.con_log>p {
	margin-bottom: 20px;
}

.con_log>p>a {
	font-size: 13px;
	margin-right: 10px;
	margin-bottom: 5px;
	color: #666;
	cursor: pointer;
	text-decoration: none;
}

.con_log>.userIn>a {
	display: block;
}

.con_log>p>a:hover {
	color: red;
	font-weight: 700;
}

.con_log>button {
	margin-right: 5px;
	width: 70px;
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	text-align: center;
	border-radius: 13px;
	box-shadow: 6px 8px 20px rgba(45, 45, 45, 0.15);
	transition: background 0.3s ease, color 0.3s ease;
	outline: none;
	border: none;
}

.con_log>button.welfare {
	color: #e43f3b;
	background: white;
}

.con_log>button.vip {
	color: #e5d790;
	background: #2d2d2a;
}

.con_log>button:hover {
	color: white;
	background: #e43f3b;
}

/*每类产品的简单展示*/
#container>.product {
	margin-top: 50px;
	width: 100%;
	height: 300px;
}

.product>.pro_line {
	width: 100%;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 26px;
	font-family: sans-serif;
	font-weight: normal;
	color: #222;
	margin-bottom: 20px;
}

.pro_line>h3 {
	display: inline-block;
}

.pro_line>div {
	display: inline-block;
	margin-left: 15px;
	cursor: pointer;
}

.pro_line>div>a {
	color: red;
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	transition: 0.5s;
}

.pro_line>div>a:after {
	content: '»';
	opacity: 0;
	/*opacity属性不占用文档流的空间*/
	transition: 0.5s;
}

.pro_line>div:hover a:after {
	opacity: 1;
}

.product>.pro_show {
	margin: 0 auto;
	padding-left: 20px;
	width: 980px;
	height: 200px;
}

.pro_1 {
	width: 100%;
	text-align: center;
	margin-top: 300px;
}

.pro_1>.item_content {
	width: 100%;
	text-align: center;
}

/*底部对商城的补充说明*/
#footer {
	margin-top: -80px;
	width: 100%;
	height: 200px;
	background: #F0F3EF;
}

#footer>img {
	display: block;
	margin: 0 auto;
}

#footer>.footer_text {
	width: 100%;
	border-top: 1px solid #DEDEDE;
}
</style>
